<template>
  <div class="w-full flex justify-center relative">
    <el-image class="w-[100%]" :src="bgImgPath?.bgImg27" lazy />
    <div
      class="w-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center p-4">
      <div class="text-white text-center">
        <div class="text-3xl md:text-8xl mb-4 font-bold text-[#ff6839]">
          {{ aboutConfig?.title }}
        </div>
      </div>
    </div>
  </div>
  <div class="w-full relative p-4 bg-[#f2f2f2]">
    <div class="text-[25px] mb-4 font-bold  text-[#3498db]">
      {{ aboutConfig?.subtitle }}
    </div>
    <div class="text-[15px] text-gray-600">
      {{ aboutConfig?.content }}
    </div>
  </div>
  <div class="relative p-4">
    <div class="flex items-center justify-center">
      <div class="w-[60px] h-[60px] bg-[#3498db] flex items-center justify-center rounded-md">
        <el-image class="w-[40px] h-[40px]" :src="iconPath?.icon5" lazy />
      </div>
      <div class="text-[25px] font-bold text-[#3498db] ml-1 text-center">
        {{ aboutConfig?.team[0].name }}
        <div class="dots-mobile"></div>
      </div>
    </div>
    <div class="text-[15px]  text-gray-600 mt-4">
      {{ aboutConfig?.team[0].content }}
    </div>
  </div>
  <div class="relative bg-[#f2f2f2] p-4">
    <div class="flex items-center justify-center">
      <div class="w-[60px] h-[60px] bg-[#3498db] flex items-center justify-center rounded-md">
        <el-image class="w-[40px] h-[40px]" :src="iconPath?.icon4" lazy />
      </div>
      <div class="text-[25px] font-bold text-[#3498db] ml-1 text-center">
        {{ aboutConfig?.team[1].name }}
        <div class="dots-mobile"></div>
      </div>
    </div>
    <div class="text-[15px] text-gray-600 mt-4">
      {{ aboutConfig?.team[1].content }}
    </div>
  </div>
  <div class="relative p-4">
    <div class="flex items-center justify-center">
      <div class="w-[60px] h-[60px] bg-[#3498db] flex items-center justify-center rounded-md">
        <el-image class="w-[40px] h-[40px]" :src="iconPath?.icon5" lazy />
      </div>
      <div class="text-[25px] font-bold text-[#3498db] ml-1 text-center">
        {{ aboutConfig?.team[2].name }}
        <div class="dots-mobile"></div>
      </div>
    </div>
    <div class="text-[15px] text-gray-600 mt-4">
      {{ aboutConfig?.team[2].content }}
    </div>
  </div>
  <div class="relative bg-[#f2f2f2] p-4">
    <div class="flex items-center justify-center">
      <div class="w-[60px] h-[60px] bg-[#3498db] flex items-center justify-center rounded-md">
        <el-image class="w-[40px] h-[40px]" :src="iconPath?.icon4" lazy />
      </div>
      <div class="text-[25px] font-bold text-[#3498db] ml-1 text-center">
        {{ aboutConfig?.team[3].name }}
        <div class="dots-mobile"></div>
      </div>
    </div>
    <div class="text-[15px] text-gray-600 mt-4">
      {{ aboutConfig?.team[3].content }}
    </div>
  </div>

  <div class="w-full container flex relative mt-[26px] mb-[26px]">
    <el-image class="w-[100%]" v-if="currentLanguage === 'tl'" :src="traditional?.bgImg15" lazy />
    <el-image class="w-[100%]" v-else-if="currentLanguage === 'en'" :src="english?.bgImg15" lazy />
    <el-image class="w-[100%]" v-else :src="chinese?.bgImg15" lazy />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useConfig } from '@/composables/useConfig'
import bgImgPath from "./bgImgPath/index";
import chinese from "./bgImgPath/chinese";
import english from "./bgImgPath/english";
import traditional from "./bgImgPath/traditional";
import { useI18n } from "vue-i18n";
import iconPath from "./bgImgPath/iconPath";

const { getAboutConfig } = useConfig();
const aboutConfig = computed(() => getAboutConfig());
const { locale } = useI18n();
const currentLanguage = computed(() => locale.value);

onMounted(() => {
})
</script>

<style scoped>
/* 隐藏所有方向的滚动条 */
.no-scrollbar {
  /* width: 100vw;
  height: calc(100vh); */
  overflow-y: auto;
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

/* 自定义样式 */
.direction-column {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dots-mobile {
  flex: 1;
  height: 2px;
  position: relative;
  background-image: radial-gradient(circle, #3498db 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 6px 0;
  /* 跳过第一个位置 */
  margin-top: 8px;
}
</style>